<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta author="tianjindong.cn 田金东">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>听到微笑的博客读者墙</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/nprogress.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="/images/icon/icon.png">
<link rel="shortcut icon" href="/images/icon/favicon.ico">
<style type="text/css">
.error {
	color: red;
	font-weight:7;
	padding-left: 10px;
}
</style>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/nprogress.js"></script>
<script src="/js/jquery.lazyload.min.js"></script>
</head>

<body class="user-select">
	<jsp:include page="common/top.jsp" />
	<section class="container container-page">
		<div class="pageside">
			<div class="pagemenus">
				<ul class="pagemenu">
					<li>
						<a href="/tags.html">标签云</a>
					</li>
					<li>
						<a href="/links.html">友情链接</a>
					</li>
					<li>
						<a href="javascript:void(0);" style="color:#3399CC;">问题反馈</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="content">
			<header class="article-header">
				<h1 class="article-title">问题反馈</h1>
			</header>
			<!-- 提示框 -->
			<div id="message-ok" class="row" style="display: none">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="alert alert-success" role="alert" style="text-align:center;">反馈成功！</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<div id="message-error" class="row" style="display: none">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="alert alert-warning" role="alert" style="text-align:center;">系统错误，反馈失败！</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<div class="readers row">
				<div class="col-md-1"></div>
				<div class="col-md-9">
					<form id="form" class="form-horizontal" method="post">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">主题</label>
							<div class="col-sm-10">
								<input type="text" name="title" class="form-control" id="inputEmail3" placeholder="请输入反馈的主题">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10">
								<input type="email" name="email" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">反馈内容</label>
							<div class="col-sm-10">
								<textarea id="content" name="content" class="form-control" rows="10" style="resize:none"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-primary">提交</button>
							</div>
						</div>
					</form>
				</div>
				<div class="col-md-2"></div>
			</div>
		</div>
	</section>
	<jsp:include page="common/footer.jsp" />
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/jquery.ias.js"></script>
	<script src="/js/scripts.js"></script>
	<script src="/js/console.js"></script>
	<script src="/js/jquery.validate.min.js"></script>
	<script>
		$(function() {
			$("#form").validate({
			submitHandler: function(form){//验证通过后的执行方法
				var formData=$("#form").serialize();
	            //当前的窗体通过ajax方式提交（用到jQuery.Form文件）
	            $.post(
	                "${pageContext.request.contextPath}/user/message/add.action",
	                formData,
	               	function(data){ 
	                    if(data.status=="ok"){
	                    	$("#message-ok").css("display","block");
	                    }else{
	                    	$("#message-error").css("display","block");
	                    }
	                    $("#content").attr("rows","5");//需要将输入框缩小，不然有显示bug
	                },
	                "json"
	            ); 
       		 },
				rules : {
					title : {
						"required" : true
					},
					email : {
						"required" : true,
						"email":true
					},
					content : {
						"required" : true
					}
				},
				messages : {
					title : {
						"required" : "必填",
					},
					email : {
						"required" : "必填",
						"email":"请输入正确的邮箱格式"
					},
					content : {
						"required" : "必填",
					}
				}
			});
		});
	</script>
</body>
</html>